import { AppBar, appBarClasses, Grid, Toolbar } from '@mui/material';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { maxContentWidth, maxSidebarWidth, toolbarHeight } from 'lib/constants';

export const Bar = styled(AppBar)(({ theme }) => ({
  [`&.${appBarClasses.root}`]: { backgroundColor: theme.palette.common.white },
}));

export const Container = styled(Toolbar)(({ theme }) => ({
  minHeight: `${toolbarHeight}px`,
  height: `${toolbarHeight}px`,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  borderBottom: '1px solid',
  borderBottomColor: theme.palette.divider,
}));

export const ContentContainer = styled(Grid)(({ theme }) => ({
  position: 'relative',
  paddingLeft: `${maxSidebarWidth}px`,
  paddingRight: theme.spacing(2),
  [theme.breakpoints.up(maxContentWidth + maxSidebarWidth)]: { justifyContent: 'center' },
}));

export const LogoContainer = styled(Grid)(({ theme }) => ({
  paddingLeft: theme.spacing(2),
  width: '100%',
  height: toolbarHeight,
  display: 'flex',
  alignItems: 'center',
  maxWidth: `${maxSidebarWidth}px`,
  position: 'fixed',
  top: 0,
  left: 0,
  color: theme.palette.common.black,
}));

export const Title = styled(Link)(({ theme }) => ({
  display: 'flex',
  color: theme.palette.common.black,
  textDecoration: 'none',
  alignItems: 'center',
}));

export const Logo = styled('div')(({ theme }) => ({
  width: '32px',
  height: '32px',
  marginRight: theme.spacing(0.5),
  backgroundSize: 'contain',
  backgroundRepeat: 'no-repeat',
  backgroundImage:
    "url('')",
}));

export const ActionsContainer = styled(Grid)(({ theme }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  flexGrow: 1,
  maxWidth: '100%',
  justifySelf: 'stretch',
  [theme.breakpoints.up(maxContentWidth + maxSidebarWidth)]: {
    width: `${maxContentWidth}px`,
  },
}));

export const SectionDesktop = styled(Grid)(({ theme }) => ({
  display: 'flex',
  justifyContent: 'flex-end',
  alignItems: 'center',
  color: theme.palette.texts.hint,
}));

export const UserName = styled('p')(({ theme }) => ({
  fontSize: '15px',
  color: theme.palette.text.primary,
  margin: theme.spacing(0, 1),
}));

export const LanguageContainer = styled('div')(() => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  width: '100%',
}));
